<template>
    <div class="content">
        <cl-crud @load="onLoad">
            <template #slot-filter>
                <div class="filter-list">
                    <div class="filter-item">
                        <span class="filter-title">商品状态：</span>
                        <el-select
                                size="mini"
                                filterable
                                placeholder="请选择订单状态"
                                style="width: 140px"
                                v-model="selects.status"
                                @change="val => refresh({ status: val, page: 1 })"
                        >
                            <el-option value label="全部"></el-option>
                            <el-option label="出售中商品" :value="1"></el-option>
                            <el-option label="仓库中商品" :value="2"></el-option>
                            <el-option label="售罄商品" :value="3"></el-option>
                            <el-option label="商品回收站" :value="0"></el-option>
                        </el-select>
                    </div>
                    <div class="filter-item">
                        <span class="filter-title">分类：</span>
                        <el-select
                                size="mini"
                                filterable
                                placeholder="请选择分类"
                                style="width: 140px"
                                v-model="selects.firstClassify"
                                @change="val => onClassifyChange(val, 'first')"
                        >
                            <el-option value label="全部"></el-option>
                            <el-option :label="item.name" :value="item.id" v-for="item in options.firstClassify" :key="item.id"></el-option>
                        </el-select>
                    </div>
<!--                    <div class="filter-item">-->
<!--                        <span class="filter-title">二级分类：</span>-->
<!--                        <el-select-->
<!--                                size="mini"-->
<!--                                filterable-->
<!--                                placeholder="请选择二级分类"-->
<!--                                style="width: 140px"-->
<!--                                v-model="selects.secondClassify"-->
<!--                                @change="val => onClassifyChange(val)"-->
<!--                        >-->
<!--                            <el-option :label="item.name" :value="item.id" v-for="item in options.secondClassify" :key="item.id"></el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
                    <div class="filter-item">
                        <span class="filter-title">上架时间：</span>
                        <date-picker
                                :newDate="newDate"
                                @change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
                                @refresh="refresh({ startTime: '', endTime: '', page: 1 })"
                        ></date-picker>
                    </div>
                </div>
            </template>
            <template #slot-total>
                <div class="total-list">
                    <div class="total-item">
                        <h3>商品总数(件)</h3>
                        <p>{{ subData.totalGoodsQuantity }}</p>
                    </div>
                    <div class="total-item">
                        <h3>商品销量(件)</h3>
                        <p>{{ subData.totalGoodsSales }}</p>
                    </div>
                </div>
            </template>
            <template #slot-chart>
                <div class="e-chart">
                    <div class="title">用户出单排行</div>
                    <e-chart ref="charts"></e-chart>
                </div>
            </template>
            <template #slot-rank>
                <!--实时数据-->
                <div class="rank-list">
                    <div class="rank-item">
                        <div class="title">商品销量排行</div>
                        <el-table
                                ref="goodsRankTable"
                                :data="goodsRankSaleList"
                                :row-class-name="tableRowClassName"
                                style="width: 100%">
                            <el-table-column
                                    label="排行"
                                    align="center"
                                    width="80">
                                <template slot-scope="scope">
                                    <img class="rank-icon" :src="require('@/assets/images/home/rank_' + (scope.$index + 1) + '.png')" v-if="scope.$index < 3"/>
                                    <span v-else>{{ scope.$index + 1 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="商品"
                                    align="left">
                                <template slot-scope="scope">
                                    <div class="goods-info">
                                        <img :src="scope.row.pic" />
                                        <p>{{ scope.row.title }}</p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    property="salesGoods"
                                    label="销量"
                                    align="center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    property="payment"
                                    label="订单金额"
                                    align="center"
                                    width="150">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="rank-item">
                        <div class="title">商品利润排行</div>
                        <el-table
                                ref="goodsRankTable"
                                :data="goodsRankProfitList"
                                :row-class-name="tableRowClassName"
                                style="width: 100%">
                            <el-table-column
                                    label="排行"
                                    align="center"
                                    width="80">
                                <template slot-scope="scope">
                                    <img class="rank-icon" :src="require('@/assets/images/home/rank_' + (scope.$index + 1) + '.png')" v-if="scope.$index < 3"/>
                                    <span v-else>{{ scope.$index + 1 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="商品"
                                    align="left">
                                <template slot-scope="scope">
                                    <div class="goods-info">
                                        <img :src="scope.row.pic" />
                                        <p>{{ scope.row.title }}</p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    property="salesGoods"
                                    label="销量"
                                    align="center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    property="profit"
                                    label="利润金额"
                                    align="center"
                                    width="150">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </template>
        </cl-crud>
    </div>
</template>

<script>
	import moment from 'moment';
	import DatePicker from '@/components/DatePicker';
	import EChart from '@/components/EChart';

	export default {
		name: 'goods',
		components: {
			DatePicker,
			EChart
		},
		data() {
			return {
				crud: null,
				options: {
					firstClassify: [],
					secondClassify: []
                },
				selects: {
					status: '',
					firstClassify: ''
                },
				subData: {
					totalGoodsQuantity: 0,
					totalGoodsSales: 0
				},
				newDate: [],
				startTime: '',
                endTime: '',
				goodsRankSaleList: [],
				goodsRankProfitList: [],
			}
		},
        created() {
			let d = moment().subtract(10, 'day');

			let startTime = d
				.hour(0)
				.minute(0)
				.second(0)
				.format('YYYY-MM-DD HH:mm:ss');
			let endTime =  moment().format('YYYY-MM-DD 23:59:59');

			this.newDate = [startTime, endTime];

			// 获取一级分类
			this.$service.goods.classify.list({
				parentId: 0
			}).then(res => {
				this.options.firstClassify = res;
			});
        },
		methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.statistics)
					.set('dict', {
						api: {
							page: 'goodsStatistics'
						}
					})
					.set('layout', [
						['refresh-btn', 'slot-filter'],
						['slot-total'],
						['slot-chart'],
						['slot-rank'],
					])
					.on('refresh', async (params, { next }) => {
						const { list, subData } = await next(params);
						this.subData = subData;
						this.$refs['charts'].refresh(this.formatChart(list));
					})
					.done();
				app.refresh({
					startTime: this.newDate[0],
					endTime: this.newDate[1]
                });

				this.getGoodsRankSaleList({
					startTime: this.newDate[0],
					endTime: this.newDate[1],
                })

				this.getGoodsRankProfitList({
					startTime: this.newDate[0],
					endTime: this.newDate[1],
				})
			},
			refresh(params) {
				this.crud.refresh(params);

				if (params.startTime) {
					this.startTime = params.startTime;
					this.endTime = params.endTime;
                }
				this.getGoodsRankSaleList(params);
				this.getGoodsRankProfitList(params);
			},
            // 分类筛选
			onClassifyChange(val, level) {
				this.refresh({
					classifyId: val,
                    page: 1
                });
				// if (level === 'first') {
				// 	// 获取二级分类
				// 	this.$service.goods.classify.list({
				// 		parentId: val
				// 	}).then(res => {
				// 		this.options.secondClassify = res;
				// 	});
                // }
            },
			// 格式化图表数据
			formatChart(list) {
				const titleArr = ['商品数量', '商品销量'];
				let obj = {
					data: titleArr.map(item => {
						return {
							name: item,
							type: 'line',
							data: [],
							smooth: true
						};
					}),
					xAxis: [],
					legendSelect: {},
					lengend: titleArr
				};

				titleArr.map(item => {
					obj.legendSelect[item] = true;
				});
				list.map(item => {
					obj.data[0].data.push(item.totalQuantity);
					obj.data[1].data.push(item.sales);
					obj.xAxis.push(item.date);
				});

				return obj;
			},
			// 表格行渲染
			tableRowClassName({row, rowIndex}) {
				if (rowIndex > 0) {
					if (rowIndex % 2 === 1) {
						return 'active';
					} else {
						return '';
					}
				} else {
					return '';
				}
			},
			// 获取商品销量排行
			getGoodsRankSaleList(params) {
				this.$service.statistics.goodsRank({
					order: 'salesGoods',
					sort: 'desc',
                    ...params
                }).then(res => {
					this.goodsRankSaleList = res;
				});
			},
			// 获取商品利润排行
			getGoodsRankProfitList(params) {
				this.$service.statistics.goodsRank({
					order: 'profit',
					sort: 'desc',
					...params
				}).then(res => {
					this.goodsRankProfitList = res;
				});
			},
		}
	};
</script>

<style lang="stylus" scoped>
    .content {
        padding-bottom: 20px;
        background: #fff;
        .cl-crud {
            overflow-y: auto;
        }
        .title {
            color: #1E1E1E;
            font-size: 18px;
            font-weight: 600;
        }
        .e-chart {
            width: 100%;
            padding: 20px;
            border-radius: 8px;
            border: 2px solid  #F5F6FD;
            box-shadow: inset 0 5px 20px #F5F6FD;
        }
        .rank-list {
            margin-top: 10px;
            width: 100%;
            flexBox(space-between);
            .rank-item {
                height: 400px;
                background: #fff;
                border-radius: 8px;
                width: 49%;
                border: 2px solid  #F5F6FD;
                padding: 20px 0;
                box-shadow: inset 0 5px 20px #F5F6FD;
                .title {
                    padding: 0 25px;
                    margin-bottom: 10px;
                }
            }
        }
        /deep/.el-table{
            td {
                height: 62px;
                padding: 0;
                border-bottom: none;
            }
            .active {
                background: #F5F6FD;
            }
            .rank-icon {
                width: 30px;
            }
            .goods-info {
                width: 100%;
                flexBox(center, center);
                img {
                    width: 50px;
                    height: 50px;
                }
                p {
                    flex: 1;
                    margin-left: 14px;
                    color: #333333;
                }
            }
        }
    }
</style>